<template>
  <view class="intergralDetails">
    <view class="rich_box"><u-parse :content="pro_details.content"></u-parse></view>
    <view class="fix_btn_box"><button class="yellow_btn" @tap="goAddress">立即兑换</button></view>
    <u-modal :show="buyShow" :content="content" @cancel="buyShow = false" @confirm="confirmBuy" :showCancelButton="true"
      confirmColor="#FED100"></u-modal>
  </view>
</template>

<script>
export default {
  data () {
    return {
      buyShow: false,
      pro_id: '',
      content: '',
      pro_details: {},
      chooseAddress: {}
    };
  },
  onLoad (val) {
    if (val.pro_id) {
      this.pro_id = val.pro_id;
      this.getDetails();
    }
  },
  methods: {
    getDetails () {
      this.$api.proDetail({ pro_id: this.pro_id }).then(res => {
        console.log(res, '获取商品详情');
        this.pro_details = res.data;
      });
    },
    goAddress () {
      uni.navigateTo({
        url: '/pages/integralShop/intergralAddress?pageType=order'
      });
    },
    setAddress (address) {
      this.buyShow = true;
      this.chooseAddress = address;
      this.content = `确认使用地址"${address.province}${address.city}${address.county}${address.address}${address.num}"兑换？`;
    },
    confirmBuy () {
      this.$api.convertPro({ pro_id: this.pro_details.id, address_id: this.chooseAddress.id }).then(res => {
        this.$helper.toast(res.msg);
        this.buyShow = false;
        if (res.code == 1) {
          setTimeout(() => {
            uni.navigateBack();
          }, 800);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.intergralDetails {
  padding: 24rpx;
  background-color: #fff;
  box-sizing: border-box;
  .details_img {
    width: 100%;
    height: 300rpx;
    margin-bottom: 50rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .rich_box {
  }
  .fix_btn_box {
    position: fixed;
    bottom: 20rpx;
    width: 94%;
    margin: 0 auto;
  }
}
</style>
